<template>
  <Fragment>
    <div class="head-wrap borderBottom-1px">
      <div class="title left borderBottom-2px">{{title}}</div>
      <div class="operate right">                  
      </div>
    </div>
    <div class="content-wrap">
      <div class="chart-content" ref="outpatientIncomeStatistics">
        2019
      </div>                         
    </div>
    <img src="@/assets/images/60548.png" class="card819" alt="">
  </Fragment>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill'
import { Fragment } from 'vue-fragment'
export default {
  name:'box-card-single-analysis6-jigouziyuantongji',
  components:{Fragment},
  props:{
    title:{
      type:String
    }
  },
  mounted(){
    this.makeData()
  },
  methods:{
    makeData(){
      let data = [
        {
            name: '能源总消耗量',
            value: 459,
        },
        {
            name: '物耗支出',
            value: 159,
        },
        {
            name: '科研课题数',
            value: 259,
        },
        {
            name: 'SCI论文数',
            value: 159,
        },
        {
            name: '统计源期刊论文',
            value: 259,
        },
        {
            name: '社区居民满意度分数',
            value: 259,
        },
        {
            name: '患者满意度分数',
            value: 459,
        },
        {
            name: '职工满意度分数',
            value: 159,
        },
        {
            name: '医疗投诉例数',
            value: 259,
        },
        {
            name: '医疗事故例数',
            value: 159,
        },
        {
            name: '医疗纠纷例数',
            value: 259,
        },
        {
            name: '不良职业行为记分',
            value: 159,
        },
    ];

    var titleArr = [],
    seriesArr = [],
      colors = [
        ['#389af4', '#dfeaff'],
        ['#ff8c37', '#ffdcc3'],
        ['#ffc257', '#ffedcc'],
        ['#fd6f97', '#fed4e0'],
        ['#a181fc', '#e3d9fe'],
        ['#1181fc', '#13d9fe'],
        ['#3181fc', '#33d9fe'],
        ['#5181fc', '#53d9fe'],
        
        ['#389af4', '#dfeaff'],
        ['#ff8c37', '#ffdcc3'],
        ['#ffc257', '#ffedcc'],
        ['#fd6f97', '#fed4e0'],
        ['#a181fc', '#e3d9fe'],
        ['#1181fc', '#13d9fe'],
        ['#3181fc', '#33d9fe'],
        ['#7181fc', '#73d9fe'],
      ];
      data.forEach(function (item, index) {
        titleArr.push({
          text: item.name,
          x: index > 5 ? (index - 6) * 20 + 10 + '%' : index * 20 + 10 + '%',
          y: index > 5 ? '85%' : '43%',
          // top: '65%',
          textAlign: 'center',
          textStyle: {
              fontWeight: 'normal',
              fontSize: '10',
              color: colors[index][0],
              textAlign: 'center',
          },
      });
      seriesArr.push({
        // name: item.name,
        type: 'pie',
        clockWise: false,
        radius: ['27%', '32%'],
        itemStyle: {
            normal: {
                color: colors[index][0],
                shadowColor: colors[index][0],
                shadowBlur: 0,
                label: {
                    show: false,
                },
                labelLine: {
                    show: false,
                },
            },
        },
        hoverAnimation: false,
        center: [index > 5 ? (index - 6) * 20 + 10 + '%' : index * 20 + 10 + '%', index > 5 ? '70%' : '25%'],
        data: [
            {
                value: item.value,
                label: {
                    normal: {
                        formatter: function (params) {
                            return params.value ;
                        },
                        position: 'center',
                        show: true,
                        textStyle: {
                            fontSize: '14',
                            fontWeight: 'bold',
                            color: colors[index][0],
                        },
                    },
                },
            },
            {
                value: 550 - item.value,
                name: 'invisible',
                itemStyle: {
                    normal: {
                        color: colors[index][1],
                    },
                    emphasis: {
                        color: colors[index][1],
                    },
                },
            },
          ],
        });
      });

      const option = {
          backgroundColor: '',
          title: titleArr,
          series: seriesArr,
      };
  
      this.makeGraph(this.$refs.outpatientIncomeStatistics,option)

    },
    makeGraph(ref,option){
      let myChart=echarts.init(ref)
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
.left{float: left;}
.right{float: right;}
.borderBottom-1px{
  border-bottom: .01rem solid #7787C7 ;
}
.borderBottom-2px{
  border-bottom: .02rem solid #7787C7 ;
}
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: .26rem;
        line-height: .26rem;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
    }
  }
  .content-wrap{
    width: 100%;
    height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
    .chart-content{
      width: 100%;
      height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
      float: left;
      overflow: hidden;
    }
  }
  img{width: 100%;float: left;}
</style>